<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="/resources/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="/resources/themes/icon.css" />
<script type="text/javascript" src="/resources/jquery.min.js"></script>
<script type="text/javascript" src="/resources/jquery.easyui.min.js"></script>

<script>
//列表模型
function test(){
    var center = $('body').layout('panel','center');
    var gird = $('#grid').datagrid({
       // width:'100%',
        rownumbers:true,
        singleSelect:true,
        collapsible:true,
        fitColumns:true,
        url: '/usermanage/userList.json',
        columns: [[
                  { title : 'ID', field : 'uid', width : 120, align : 'center' }, 
                  { title : '帐号', field : 'username', width : 200, align : 'center'},
                  { title : '注册日期', field : 'regTime', width : 120, align : 'center'},
                  { title : '注册IP', field : 'regIpStr', width : 80, align : 'center' },
                  { title : '登录日期', field : 'lastTime', width : 120, align : 'center'},
                  { title : '登录IP', field : 'lastIpStr', width : 80, align : 'center' }, 
                  { title : '状态', field : 'status', width : 50, align : 'center', 
                      formatter : function ( colValue , rowData , rowIndex ) {
                          return colValue == 0 ? '冻结' : '正常';
                      } 
                  },
                  { title : '操作', field : 'operation', width : 160, align : 'center', 
                      formatter : function ( colValue , rowData , rowIndex ) {
                          var menu = "<div id='op-menu-" + rowIndex + "' class='op-menu'>";
                          if(rowData.status == 1){
                              menu += "<a href='javascript:void(0);' class='a-btn'>冻结</a> ";
                          } else {
                              menu += "<a href='javascript:void(0);' class='a-btn'>解封</a></div>";
                          }
                          return menu;
                      } 
                  }
                 ]],
        idField: 'uid',
        pagination: true,
        pageNumber: 1,
        pageSize : 20,
        striped: true,
        method: 'GET',
        checkOnSelect : true,
        onLoadSuccess : function(data){
            $('.a-btn').linkbutton({
            });
        }
    });
}
$(document).ready(function(){
    
});
</script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA;">north region</div>
    <div data-options="region:'west',split:true,title:'主菜单'" style="width: 200px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="用户管理" data-options="selected:true" style="padding: 10px;">
                <ul>
                    <li><a href="javascript:void(0);" onclick="test();">用户列表</a></li>
                </ul>
            </div>
            <div title="审核管理" style="padding: 10px;">
                <ul>
                    <li><a href="javascript:void(0);">照片审核</a></li>
                    <li><a href="javascript:void(0);">视频审核</a></li>
                </ul>
            </div>
            <div title="统计查看" style="padding: 10px">
                <ul>
                    <li><a href="javascript:void(0);">全部用户</a></li>
                    <li><a href="javascript:void(0);">新用户</a></li>
                    <li><a href="javascript:void(0);">活跃用户</a></li>
                    <li><a href="javascript:void(0);">流失用户</a></li>
                    <li><a href="javascript:void(0);">回头用户</a></li>
                    <li><a href="javascript:void(0);">付费用户</a></li>
                    <li><a href="javascript:void(0);">财务统计</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:'Center'">
        <div id="grid"></div>
    </div>
</body>
</html>
